import React, { useState } from 'react';
import './index.scss';
import Template_waterfall_flow from './Template_waterfall_flow/Template_waterfall_flow'
import Selected_templates from '../Selected_templates/Selected_templates'
const MasterPlate: React.FC = () => {
  // 模板类型状态
  const [activeTemplate, setActiveTemplate] = useState('图片模板');
  // 展开状态管理
  const [expanded, setExpanded] = useState({
    material: false,
    industry: false
  });
  // 选中状态管理
  const [selected, setSelected] = useState({
    channel: '全部',
    material: '全部',
    industry: '全部'
  });

  // 模板类型数据
  const templateTypes = ['图片模板', 'PPT模板', '视频模板', 'H5网页模板'];

  // 物料数据（简化示例）
  const materials = [
    '海报', '公众号配图', '文章长图', '小红书配图',
    '视频封面', '直播背景', '电商模板海报', '动态海报',
    '小红书封面', '全屏海报', '商品主图', '公众号次图',
    '详情页', 'LOGO', '店铺首页', '小程序封面', '头像', '手账'
  ];

  // 行业数据（简化示例）
  const industries = [
    '通用', '教育培训', '金融保险', '商品零售',
    '美容美妆', '食品生鲜', '服饰箱包', '文体娱乐',
    '企业行政', '政务媒体', '生活服务', '母婴亲子',
    '房地产' // 补充图片中出现的选项
  ];

  return (
    <div className="masterplate">
      {/* 模板类型切换 */}
      <div className="template-types">
        {templateTypes.map(type => (
          <div
            key={type}
            className={`type-item ${activeTemplate === type ? 'active' : ''}`}
            onClick={() => setActiveTemplate(type)}
          >
            {type}
          </div>
        ))}
      </div>

      {/* 筛选条件区域 */}
      <div className="filters">
        {/* 渠道筛选 */}
        <FilterSection
          title="渠道"
          items={['全部', '电商', '微信/公众号', '社群发圈', '生活娱乐', '小红书', '短视频平台', '线下印刷', '线下电商']}
          selected={selected.channel}
          onSelect={(item) => setSelected({ ...selected, channel: item })}
        />

        {/* 物料筛选 */}
        <FilterSection
          title="物料"
          items={[
            '全部',
            ...(expanded.material ? materials : materials.slice(0, 7)), // 默认显示前7个
            expanded.material ? '收起' : '更多'
          ]}
          selected={selected.material}
          onSelect={(item) => {
            if (item === '更多') setExpanded({ ...expanded, material: true });
            else if (item === '收起') setExpanded({ ...expanded, material: false });
            else setSelected({ ...selected, material: item });
          }}
        />

        {/* 行业筛选 */}
        <FilterSection
          title="行业"
          items={[
            '全部',
            ...(expanded.industry ? industries : industries.slice(0, 7)), // 默认显示前7个
            expanded.industry ? '收起' : '更多'
          ]}
          selected={selected.industry}
          onSelect={(item) => {
            if (item === '更多') setExpanded({ ...expanded, industry: true });
            else if (item === '收起') setExpanded({ ...expanded, industry: false });
            else setSelected({ ...selected, industry: item });
          }}
        />
      </div>
      <Template_waterfall_flow />
    </div>
  );
};

// 筛选区块组件
const FilterSection: React.FC<{
  title: string;
  items: string[];
  selected: string;
  onSelect: (item: string) => void;
}> = ({ title, items, selected, onSelect }) => (
  <div className="filter-section">
    <div className="filter-title">{title}</div>
    <div className="filter-items">
      {items.map(item => (
        <div
          key={item}
          className={`filter-item ${selected === item ? 'selected' : ''}`}
          onClick={() => onSelect(item)}
        >
          {item}
        </div>
      ))}
    </div>
  </div>

);

export default MasterPlate;